<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-left" color="#fff" size="34"></u-icon> -->
			</view>
			<view class="r-name">地址管理</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="content p-32">
			<view class="address">
				<view class="address-item" v-for="(item, index) in addressList" :key="index">
					<view class="top dispaly-just-between">
						<view class="add-left">
							<view class="left-top dispaly-center">
								<view class="name">{{ item.name }}</view>
								<view class="tel">{{ item.tel }}</view>
							</view>
							<view class="add">{{ item.address }}</view>
						</view>
						<view class="edit" @click="$goUrl(`/subPackage/mine/addressManage?type=edit`)">
							<image src="/static/mine/edit.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="bottom dispaly-just-between">
						<view class="bo-left dispaly-center" @click="setDefaultAddress(item, index)">
							<view class="radio dispaly-align-center">
								<view class="n" v-if="item.isDefault"></view>
							</view>
							<view class="default">默认地址</view>
						</view>
						<view class="del" @click="delAddress(item, index)">
							<image src="/static/mine/del.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-btn-box dispaly-align-center">
		<view class="bottom-btn dispaly-align-center" @click="$goUrl(`/subPackage/mine/addressManage?type=add`)">新增地址</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util';

const addressList = ref([{ id: 1, name: '张文欣', tel: '189****2359', address: '重庆市九龙坡区火炬大厦1-1', isDefault: false }]);
// 设置默认地址
const setDefaultAddress = (item, index) => {
	addressList.value.forEach((item, idx) => {
		item.isDefault = idx === index; // 如果索引匹配，则设置为true，否则为false
	});
};

// 删除地址
const delAddress = (item, index) => {
	uni.showModal({
		title: '提示',
		content: '是否删除该地址',
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};

// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	for (var i = 0; i < 10; i++) {
		addressList.value.push({ id: 1, name: '张文欣', tel: '189****2359', address: '重庆市九龙坡区火炬大厦1-1', isDefault: false });
	}
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.tag {
	margin-right: 10rpx;
}

.r-name {
	color: #020121;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.content {
	.address {
		padding-bottom: 130rpx;
		.address-item:last-child {
			margin-bottom: 0;
		}
		.address-item {
			padding: 24rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			.top {
				border-bottom: 1rpx solid #f1f1f1;
				padding-bottom: 24rpx;
				.add-left {
					.left-top {
						margin-bottom: 5rpx;
						.name {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 700;
							font-size: 36rpx;
							color: #020121;
							margin-right: 20rpx;
						}
						.tel {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 28rpx;
							color: #7b7b89;
						}
					}
					.add {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #020121;
						margin-top: 5rpx;
					}
				}
			}
			.bottom {
				margin-top: 16rpx;
				.bo-left {
					.radio {
						width: 26rpx;
						height: 26rpx;
						border: 2rpx solid #d8d8d8;
						border-radius: 50%;
						margin-right: 5rpx;
						.n {
							width: 10rpx;
							height: 10rpx;
							background: #020121;
							border-radius: 50%;
						}
					}
					.default {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 24rpx;
						color: #b6b6bb;
					}
				}
			}
		}
	}
}

.bottom-btn-box {
	height: 120rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16rpx 32rpx;
	.bottom-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(138deg, #7b7b89 0%, #020121 100%);
		border-radius: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
